<template>
  <div class="addfriend_container">
    <div class="search">
      <el-input placeholder="请输入账号"
                clearable
                size="mini"
                v-model="addmessage.searchAccount"
                @clear='infoshow=false'
                style="width:250px">
        <el-button slot="append"
                   icon="el-icon-search"
                   @click="search"></el-button>
      </el-input>
      <!-- 添加按钮 -->
      <el-button type="primary"
                 size="mini"
                 class="btnAdd el-icon-plus"
                 @click="openAddDialog"></el-button>
    </div>
    <div class="addfriend_wrap"
         v-if="infoshow">
      <img :src="otherInfo.u_HeadPortrait"
           style="width:100px;height:100px"
           @click="photoVisible=true">
      <div class="message">
        <div>账号:<span>{{otherInfo.u_LoginID}}</span></div>
        <div>昵称:<span>{{otherInfo.u_NickName}}</span></div>
        <div>姓名:<span>{{otherInfo.u_Name}}</span></div>
        <div>年龄:<span>{{otherInfo.u_Age}}</span></div>
        <div>性别:<span>{{otherInfo.u_Sex}}</span></div>
        <div>签名:<span>{{otherInfo.u_Signature}}</span></div>
        <div>生日:<span>{{otherInfo.u_Birthday}}</span></div>
        <div>邮箱:<span>{{otherInfo.u_Email}}</span></div>
        <div>电话:<span>{{otherInfo.u_Telephone}}</span></div>
        <div>介绍:<span>{{otherInfo.u_Intro}}</span></div>
      </div>
    </div>

    <!-- 预览图片弹窗 -->
    <el-dialog :visible.sync="photoVisible"
               width="40%"
               append-to-body>
      <span> <img :src="otherInfo.u_HeadPortrait"
             style="width:100%"></span>
    </el-dialog>

    <!-- 添加用户弹窗 -->
    <el-dialog title="添加好友"
               :visible.sync="addVisible"
               width="50%"
               :before-close="handleClose"
               append-to-body>
      <!--  选择分组 -->
      <el-select v-model="addmessage.friendGroup"
                 placeholder="选择分组"
                 size="mini">
        <el-option v-for="item in groups"
                   :key="item.fg_Name"
                   :label="item.fg_Name"
                   :value="item.fg_Name">
        </el-option>
      </el-select>

      <!-- 添加分组按钮 -->
      <el-button type="info"
                 size="mini"
                 class="btnaddgroup"
                 @click="addgroupvisible = !addgroupvisible">添加分组</el-button>

      <!-- 添加好友分组组件 -->
      <div class="addgroupwrap"
           v-if="addgroupvisible">
        <!-- 群组名 -->
        <el-input size="mini"
                  clearable
                  v-model="addgroupdata.FG_Name"
                  style="width:200px;margin-bottom:10px"
                  placeholder="输入组名">
          <el-button size="mini"
                     slot="append"
                     @click="addGroup">提交</el-button>
        </el-input>
      </div>

      <!-- 附加消息 -->
      <el-input size="mini"
                v-model="addmessage.message"
                style="width:300px; display:block;margin-bottom:10px"
                clearable
                placeholder="说点什么介绍自己吧"></el-input>
      <!-- 好友备注 -->
      <el-input size="mini"
                v-model="addmessage.fname"
                style="width:300px; display:block;"
                clearable
                placeholder="好友备注"></el-input>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="addVisible = false"
                   size="mini">取 消</el-button>
        <el-button type="primary"
                   @click="addFriendEvent"
                   size="mini">提 交</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
export default {
  name: 'AddFriend',
  created () {
    this.$message.success('查询好友')
  },
  data () {
    return {
      // 别人的信息
      otherInfo: {},
      // 信息是否显示
      infoshow: false,
      // 照片预览显示
      photoVisible: false,
      // 添加好友弹窗
      addVisible: false,
      // 群组消息
      groups: [
      ],
      // 添加好友组件是否可见
      addgroupvisible: false,
      // 发送的添加好友消息
      addmessage: {
        friendGroup: '',
        message: '',
        fromID: window.sessionStorage.getItem('selfInfo'),
        // 搜索的账号
        searchAccount: '',
        // 好友备注
        fname: ''
      },
      // 好友分组数据
      addgroupdata: {
        FG_UserID: window.sessionStorage.getItem('selfInfo'), // 自己的账号
        FG_Name: '' // 组名
      }

    }
  },
  methods: {
    // 搜索好友
    search () {
      this.$http.get('userinfo', { params: { username: this.addmessage.searchAccount } }).then((response) => {
        const res = response.data
        if (res.code !== 200) {
          this.infoshow = false
          return this.$message.error(res.msg)
        }
        this.otherInfo = res.data
        this.infoshow = true
        return this.$message.success(res.msg)
      })
    },
    // 防止弹窗误关
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => { })
    },
    // 添加好友分组
    addGroup () {
      var qs = require('qs')
      this.$http.post('friendgroup', qs.stringify(this.addgroupdata))
        .then((response) => {
          const res = response.data
          if (res.code !== 200) return this.$message.error(res.msg)
          else {
            this.getAllGroup()
            this.addgroupvisible = false
            return this.$message.success(res.msg)
          }
        })
    },
    // 得到该好友的所有分组
    getAllGroup () {
      this.$http.get('friendgroup', { params: { account: this.addmessage.fromID } }).then((response) => {
        const res = response.data
        if (res.code !== 200) {
          return this.$message.error(res.msg)
        }
        this.groups = res.data
        return this.$message.success(res.msg)
      })
    },
    // 打开弹窗
    openAddDialog () {
      // 得到所有的群组消息
      this.getAllGroup()
      this.addVisible = true
    },
    // 发送添加好友的消息
    addFriendEvent () {
      var qs = require('qs')
      this.$http.post('addfriendmsg', qs.stringify(this.addmessage))
        .then((response) => {
          const res = response.data
          if (res.code !== 200) return this.$message.error(res.msg)
          else {
            this.addVisible = false
            return this.$message.success(res.msg)
          }
        })
    }
  }
}
</script>

<style lang="less" scoped>
.addfriend_container {
  position: relative;
  width: 100%;
  height: 100%;
  .search {
    padding: 30px 250px;
    .btnAdd {
      margin-left: 20px;
    }
  }

  .addfriend_wrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    img,
    .message {
      float: left;
    }

    img {
      margin-top: 50px;
      cursor: pointer;
    }

    .message {
      margin-left: 20px;
    }
  }
}

.btnaddgroup {
  margin-left: 10px;
  margin-bottom: 10px;
}
</style>
